<template>
  <div style="height:100%">
    <div v-if="!canViewTask" class="no-auth">
      <img :src="taskViewImage1" />
      <p class="desc">{{$t('common.base.tip.noAuth')}}</p>
    </div>
    <div class="task-detail-container" v-if="canViewTask" ref="container">
      <div id="task-task-detail-view"></div>
      <!-- start 顶部操作区 -->
      <div class="task-detail-header" ref="header">
        <div class="task-detail-header-top" :class="{ active: !collapse }">
          <!-- start 折叠按钮 -->
          <div class="collapse-btn" @click="collapseBtn">
            <el-tooltip :content="collapse? `${$t('common.base.collapse')}`:`${$t('common.base.expand')}`" placement="top">
              <i class="iconfont icon-more"></i>
            </el-tooltip>
          </div>
          <!-- end 折叠按钮 -->
          <!-- start 客户信息 -->
          <div class="customer-info-wrap">
            <div :class="['customer-name', {'link-text': allowOpenCustomerView}]" @click="openCustomerView(false)">
              {{ customer.name }}
            </div>
            <el-tooltip v-if="showCustomerRelationTaskCount" placement="top">
              <div slot="content" v-html="`${$t('task.unfinishedTask')}：${customerRelationTaskCountData.unfinished} </br> ${$t('task.allTask')}：${customerRelationTaskCountData.all}`">
              </div>
              <div class="relation-count-button" @click="openCustomerView(true)" v-track="$track.formatParams('CHECK_CUSTOMER_TASK_NUM')">
                {{ `${customerRelationTaskCountData.unfinished}/${customerRelationTaskCountData.all}` }}
              </div>
            </el-tooltip>
            <biz-process ref="bizProcess" :flowNodeStatus="flowNodeStatus" :flowNodeTimes="flowNodeTimes" :is-draft="isDraft" :collapseFlag='collapse' :renderProcessExceptionFlag="true" :value="processCurrentState" class="bg-w" :data="task" :flow-setting="initData.taskType.flowSetting" @change="changeTaskProcessState" :flow-over-time="initData.flowOverTime"></biz-process>
            <!--s 切换页 -->
            <div class="template-detail-tab" v-if="$route.query.JumpKey">
              <el-tooltip class="item" effect="dark" :content="$t('common.base.lastOne')" placement="top">
                <div class="tab tab-left" @click="changePage('last')">
                  <i class="iconfont icon-left"></i>
                </div>
              </el-tooltip>
              <div class="border-mid"></div>
              <el-tooltip class="item" effect="dark" :content="$t('common.base.nextOne')" placement="top">
                <div class="tab tab-right" @click="changePage('next')">
                  <i class="iconfont icon-right"></i>
                </div>
              </el-tooltip>
            </div>
            <!--e 切换页 -->
          </div>
          <!-- end 客户信息 -->
          <div class="task-delete-status" v-if="isDelete">{{$t('common.base.deleted')}}</div>

          <!-- start 顶部按钮组 -->
          <div class="task-detail-header-top-btn">
            <template v-if="!isDelete">

              <!-- <el-button type="primary" v-if="isShowIm" @click="createGroudChat">一键拉群</el-button> -->
              <el-button v-if="!isArchive && stateText===`${$t('common.task.type.closed')}` && isShowArchive" @click="archiveTask" type='plain-third' >{{$t('task.taskPlaceOnFile')}}</el-button>

              <!-- start 服务报告 -->
              <template v-if="srPrintAuthority.isShowPrintButton && isShowReport">
                <!-- 已完成 且 开启完成状态展示所有状态下的服务报告 -->
                <template v-if="finishedState && srPrintAuthority.isFinishNodeShowAllServiceReport">
                  <el-dropdown trigger="click">
                    <el-button type='plain-third' :disabled="pending" v-track="getBtnsTrackData('CREATE_SERVICE_REPORT')">{{ $t('common.task.genServiceReport') }}</el-button>

                    <el-dropdown-menu class="task-service-report-list" slot="dropdown">
                      <el-dropdown-item v-for="item in serviceReportList" :key="item.id">
                        <div class="task-service-report-item">
                          <span class="task-service-report-item-name" @click="createServiceReport(item)">{{ getServiceReportName(item) }}</span>
                          <!-- 不需要客户签名 && 个人模版 -->
                          <template v-if="!item.needSign && item.templateType !== 1">
                            <i class="iconfont icon-right1"></i>
                            <div class="task-service-report-item-content">
                              <el-tooltip class="item" effect="dark" :content="$t('task.tip.tooManyImgTip')" placement="top">
                                <span @click.prevent="downloadServiceReport(item, true)">{{ $t('task.pdfFormat') }}</span>
                              </el-tooltip>
                              <span @click.prevent="downloadServiceReport(item, false)">{{ $t('task.excelFormat') }}</span>
                            </div>
                          </template>
                        </div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>

                <template v-else>
                  <!-- （需要客户签名 or 不需要签名&&系统模版 ）-->
                  <el-button
                    type='plain-third' 
                    @click="createReport"
                    :disabled="pending"
                    v-if="srPrintAuthority.isNeedCustomerSign || (!srPrintAuthority.isNeedCustomerSign && srPrintAuthority.templateType === 1)"
                    v-track="getBtnsTrackData('CREATE_SERVICE_REPORT')"
                  >{{$t('common.task.genServiceReport')}}</el-button>
                  <!-- 不需要客户签名 && 个人模版 -->
                  <el-dropdown trigger="click" v-if="!srPrintAuthority.isNeedCustomerSign && srPrintAuthority.templateType !== 1">
                    <el-button type='plain-third'  :disabled="pending" v-track="getBtnsTrackData('CREATE_SERVICE_REPORT')">{{$t('common.task.genServiceReport')}}</el-button>

                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>
                        <el-tooltip class="item" effect="dark" :content="$t('task.tip.tooManyImgTip')" placement="left-start">
                          <a class="link-of-dropdown" href="javascript:;" @click.prevent="downloadReport(true)">{{$t('task.pdfFormat')}}</a>
                        </el-tooltip>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <a class="link-of-dropdown" href="javascript:;" @click.prevent="downloadReport(false)">{{$t('task.excelFormat')}}</a>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </template>
              <!-- end 服务报告 -->

              <el-button v-if="allowCloseTask" type="primary" @click="closeTask">{{$t('task.closeTask')}}</el-button>

              <el-button
                type="primary"
                @click="transToWiki()"
                v-if="finishedStates.includes(task.state) && allowCreate && wikiTaskFunction && !isBasicEdition"
                v-track="getBtnsTrackData('TRANS_TO_WIKI')"
              >
                {{$t('task.detail.transferToWiki')}}
              </el-button>

              <el-button type='plain-third' @click="openDialog('cancel')" :disabled="pending" v-if="allowCancelTask" v-track="getBtnsTrackData('CANCEL')">{{$t('common.base.cancel')}}</el-button>
              <el-button type='plain-third' @click="redeploy" :disabled="pending" v-if="allowRedeployTask" v-track="getBtnsTrackData('TASK_RE_ALLOT')">{{$t('common.task.exceptionStatus.allot')}}</el-button>

              <!-- start icon按钮 -->
              <div class="task-detail-btn-group bg-w" id="v-task-detail-step-3" ref="currentStateButton">
                <template v-for="(item, index) in stateButtonData">
                  <!--   添加附加组件   -->
                  <template v-if="item.isAddons && item.show">
                    <el-dropdown trigger="click" @command="handleCommandAddBtn" >
                      <el-button :data-btn-type="item.btnType" :type="item.type" :disabled="pending">
                        {{ item.name }}
                      </el-button>
                      <el-dropdown-menu slot="dropdown" class="el-dropdown-provider">
                        <el-dropdown-item v-for="zitem in addonsRequird" :key="`${zitem.cardId}_cardBtn`" :command="zitem.cardId">
                          <div>{{ zitem.btnName }}</div>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                  <!-- 高级审批按钮 -->
                  <template v-else-if="item.show && ['agree', 'refuse'].includes(item.enName)">
                    <el-button :data-btn-type="item.btnType" :type="item.enName == 'agree' ? 'primary' : 'danger'" :disabled="pending" @click="openSignatures(item.enName == 'agree',item.enName)">
                      {{ item.name }}
                    </el-button>
                  </template>
                  <!-- 普通审批按钮 -->
                  <template v-else-if="item.show && item.btnType == 'approve'">
                    <el-button :data-btn-type="item.btnType" type="danger" :disabled="pending" @click="openSignatures(false)">
                      {{ $t('common.base.refuse') }}
                    </el-button>
                    <el-button :data-btn-type="item.btnType" type="primary" :disabled="pending" @click="openSignatures(true)">
                      {{ $t('common.base.agree') }}
                    </el-button>
                  </template>
                  <template v-else>
                    <el-button :data-btn-type="item.btnType" :key="index" :type="item.type" @click="item.event" :disabled="pending" v-if="item.show">
                      {{ item.name }}
                    </el-button>
                  </template>
                  
                </template>
                <!--  更多  -->
                <el-dropdown v-if="moreBtnEnable" trigger="click">
                  <el-button class="task-more-opera-btn" type="plain-third">
                    {{ $t('common.base.more') }}<i class="iconfont icon-fdn-select mar-l-8"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown" class="task-more-opera-content">
                    <el-dropdown-item v-if="allowTaskShare">
                      <div class="task-more-opera-content-item" @click.prevent="shareTask">{{$t('common.wiki.shareInside')}}</div>
                    </el-dropdown-item>

                    <el-dropdown-item v-if="allowPrintTask && isButtonDisplayed">
                      <div class="task-more-opera-content-item" @click="printTask" v-track="getBtnsTrackData('PRINT')">{{$t('common.task.printTask')}}</div>
                    </el-dropdown-item>

                    <el-dropdown-item v-if="allowDing">
                      <div class="task-more-opera-content-item" @click="ding" v-track="getBtnsTrackData('DING')">DING</div>
                    </el-dropdown-item>

                    <el-dropdown-item v-if="allowCopyTask && !isArchive">
                      <div class="task-more-opera-content-item" @click="goCopyTask" v-track="getBtnsTrackData('COPY')">{{ $t('task.detail.copyTask') }}</div>
                    </el-dropdown-item>

                    <el-dropdown-item v-if="allowDeleteTask">
                      <div class="task-more-opera-content-item" @click="deleteTask" v-track="getBtnsTrackData('DELETE')">{{ $t('task.deleteTask') }}</div>
                    </el-dropdown-item>

                    <el-dropdown-item v-if="allowEditTask && !isArchive">
                      <div class="task-more-opera-content-item" @click="goEdit" v-track="getBtnsTrackData('TO_EDIT')">{{ $t('task.editTask') }}</div>
                    </el-dropdown-item>

                    <el-dropdown-item v-if="isShowIm">
                      <div @click="createGroudChat" class="task-more-opera-content-item" v-track="getBtnsTrackData('CREATE_GROUP_CHAT')">{{ $t('common.task.oneClickPullGroup') }}</div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            <!-- end icon按钮 -->

            </template>
          </div>
        <!-- end 顶部按钮组 -->
        </div>

        <!-- start 质保审批中icon -->
        <div class="approving-img" v-show="collapse && isQualityApprove">
          <img :src="taskViewImage2" />
        </div>
        <!-- end 质保审批中icon -->

        <!-- start 审批中icon -->
        <div class="approving-img" v-show="collapse && isApproving && !isQualityApprove">
          <img :src="taskViewImage3" />
        </div>
        <!-- end 审批中icon -->

        <div class="task-detail-header-bottom bg-w" :class="{'active': !collapse}" id="v-task-detail-step-1">
          <!-- start 工单流程信息 -->
          <div class="progress-wrap bg-w" v-show="collapse" id="v-task-detail-step-0">

            <biz-process ref="bizProcess" :flowNodeStatus="flowNodeStatus" :flowNodeTimes="flowNodeTimes" :is-draft="isDraft" :renderProcessExceptionFlag="false" :value="processCurrentState" class="bg-w" :data="task" :flow-setting="initData.taskType.flowSetting" @change="changeTaskProcessState" :flow-over-time="initData.flowOverTime"></biz-process>
            <p class="state-all-btn" v-show="initData.receiptTaskForUpdate.completeTime" @click="openDialog('timeAxis')">
              {{$t('task.detail.viewAllTime')}}
            </p>

          </div>
          <!-- end 工单流程信息 -->

          <div class="task-detail-header-bottom-list">
            <!-- start 联系人信息 -->
            <div class="task-detail-header-bottom-list-item">
              <!-- <div class="linkman-info" v-if="customerOption.linkman"> -->
                <div class="form-view-row linkman-name" v-if="customerOption.linkman">
                  <label>{{$t('common.base.contact')}}</label>
                  <div class="form-view-row-content">{{ lmName }}</div>
                </div>
                <div class="form-view-row linkman-phone" v-if="customerOption.linkman">
                  <label>{{$t('common.base.phone')}}</label>
                  <div class="form-view-row-content call-phone">
                    <span>{{ lmPhone }}</span>
                    <biz-call-icon :value="lmPhone" :sourceData="callCenterSourceData" />
                  </div>
                </div>
              <!-- </div> -->
              <div class="form-view-row address-info" v-if="customerOption.address">
                <label>{{$t('common.base.address')}}</label>
                <div class="form-view-row-content form-view-row-content-address" @click="openMap" v-if="address">
                  <div>
                    <i v-if="showMap" class="iconfont icon-address"></i> 
                    <el-tooltip class="item" effect="dark" :content="address" placement="top">
                      <span> {{ address }}</span>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
            <!-- end 联系人信息 -->

            <!-- start 默认显示项：工单类型、计划时间、服务内容 -->
            <div class="task-detail-header-bottom-list-item">
              <div class="form-view-row">
                <label>{{$t('common.task.taskType')}}</label>
                <div class="form-view-row-content">{{ task.templateName }}</div>
              </div>
              <div class="form-view-row" v-if="serviceContentField">
                <label>{{ serviceContentField.displayName }}</label>
                <div class="form-view-row-content">{{ task.serviceContent }}</div>
              </div>
              <div class="form-view-row" v-if="planTimeField&&!isCalendar">
                <label>{{ planTimeField.displayName }}</label>
                <div class="form-view-row-content form-view-row-plantime">
                  {{ planTime }}
                  <template v-if="allowModifyPlanTime">
                    <el-tooltip class="item" effect="dark" :content="$t('task.modifyPlanTime')" placement="top">
                      <i class="iconfont icon-bianji1" @click="openDialog('modifyPlanTime')"></i>
                    </el-tooltip>
                  </template>
                </div>
              </div>
            </div>
            <!-- end 默认显示项：工单类型、计划时间、服务内容 -->

            <div class="task-detail-header-bottom-list-item flex-1">
              <biz-process-time :data="task" :state="taskState"></biz-process-time>
              <div class="form-view-row" v-if="planStartTimeField">
                <label>{{ planStartTimeField.displayName }}</label>
                <div class="form-view-row-content form-view-row-plantime">
                  {{ planStartTime }}
                </div>
              </div>
              <div class="form-view-row" v-if="planEndTimeField">
                <label>{{ planEndTimeField.displayName }}</label>
                <div class="form-view-row-content form-view-row-plantime">
                  {{ planEndTime }}
                </div>
                <template v-if="allowModifyPlanTime && (planStartTimeField || planEndTimeField)">
                  <el-tooltip class="item" effect="dark" :content="$t('task.modifyPlanTime')" placement="top">
                    <i class="iconfont icon-bianji1" @click="openDialog('modifyCalendarPlanTime')"></i>
                  </el-tooltip>
                </template>
              </div>

              <div class="form-view-row" v-if="planStartTimeField && planEndTimeField && isCalendar && allowAcceptTask">
                <div class="form-view-row-content form-view-row-plantime">
                  <span 
                    class="form-view-row-conflictBtn" 
                    v-if="isConflict" 
                    @click="openDialog('accept')"
                  >
                    <i class="iconfont icon-info"></i>
                    <span>{{$t('task.tip.scheduleConflict')}}</span>
                    <span class="see-action">({{$t('common.base.view')}})</span>
                  </span>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    
      <!-- end 顶部操作区 -->

      <!-- start 工单详情折叠面板 -->
      <div
        ref="TaskDetailMainElement"
        class="task-detail-main"
        :class="{ normal: !collapsing }"
        @scroll="getScroll"
      >

        <!-- start 详情平铺布局 -->
        <BaseTileLayoutTabBar
          v-if="taskLayout === 1"
          :bar-list="taskLayoutTabBarList"
          :now-item="leftActiveTab"
          @changeItem="tabBarChangeItem"
          @openLayoutModal="openBaseLayoutModal"
        ></BaseTileLayoutTabBar>
        <!-- end 详情平铺布局 -->

        <base-collapse  
          class="task-detail-main-content" 
          :direction.sync="collapseDirection"
          :hide-part-collapse="hidePartCollapse">
          <!-- start 工单详情 -->
          <template slot="left">
            <div class="task-detail-main-content-left" v-show="collapseDirection != 'left'">
              <BaseTileLayoutTabBar
                v-if="taskLayout === 2"
                :bar-list="taskLeftBarList"
                :now-item="leftActiveTab"
                :structure="2"
                @openLayoutModal="openBaseLayoutModal"
              ></BaseTileLayoutTabBar>
              <task-view 
                ref="taskView"
                v-if="leftActiveTab == 'task-view'"
                :task="task" 
                :fields="fields" 
                :calendar-plan-time="calendarPlanTime" 
                :plan-time="planTime" 
                :plan-start-time="planStartTime" 
                :plan-end-time="planEndTime" 
                :is-paused="isPaused" 
                :state-text="stateText" 
                :state-color="stateColor" 
                :finished-state="finishedState" 
                :customer-option="customerOption" 
                :allow-open-customer-view="allowOpenCustomerView"
                @openCustomerView="openCustomerView"
                :show-customer-relation-task-count="showCustomerRelationTaskCount"
                :customer-relation-task-count-data="customerRelationTaskCountData"
                :lm-name="lmName"
                :lm-phone="lmPhone"
                :address="address"
                :show-map="showMap"
                @openMap="openMap"
                :show-call-phone="showCallPhone"
                @makePhoneCall="makePhoneCall"
                :can-see-customer="canSeeCustomer" 
                :allow-edit-synergy="allowEditSynergy" 
                :allow-modify-plan-time="allowModifyPlanTime"
                :allowModifyCustomExecutor="allowModifyCustomExecutor"
                @modifyPlanTime="modifyPlanTimeHandle"
                :form-cell-count="formCellCount"
                :intelligentConfig="intelligentConfig"
              />
            </div>

            <div class="collapse-left" v-show="collapseDirection == 'left'">{{$t('task.taskInfo')}}</div>
          </template>
          <!-- end 工单详情 -->

          <!-- start 附加组件 -->
          <template slot="right">
            <div
              class="task-detail-main-content-right"
              v-show="collapseDirection != 'right'"
              v-loading="rightTabBarLoading"
            >
              <BaseBarV3
                v-if="taskLayout == 2"
                :bar-list="tabBarList"
                :now-item="rightActiveTab"
                @changeItem="tabBarChangeItem"
                @upDateBarList="tabBarUpdateList"
              ></BaseBarV3>
              <!-- 动态信息  -->
              <task-info-record
                ref="record"
                v-if="rightActiveTab == 'record'"
                :share-data="propsForSubComponents"
                :show-template="showTaskRecordTemplate"
                :taskLayout="taskLayout"
              />
              <!-- 任务信息  -->
              <pro-task-tab
                ref="proTaskTab"
                v-else-if="rightActiveTab == 'pro-task-tab'"
                :projectTaskId="task.projectTaskId"
                :task="task"
              >
              </pro-task-tab>
              <!-- 回执信息  -->
              <task-receipt-detail-view
                :allow-approve="allowApprove"
                v-else-if="rightActiveTab == 'receipt-view'"
                :share-data="propsForSubComponents"
                :task-fields="fields"
                :quality-info="task.qualityInfo"
                @edit="openDialog('editReceipt')"
                :form-cell-count="formCellCount"
              />
              <!-- 服务商结算  -->
              <settlement-providers
                ref="provideSettle"
                v-else-if="rightActiveTab == 'settlement'"
                :task="task"
                :provide-settle-config="provideSettleConfig"
                :providerSettleV2="providerSettleV2"
                :provideSettleConfig="provideSettleConfig"
                @refresh-page="refreshPage"
                @close="CloseSettlement"
                @open="OpenSettlement"
                :SettlementData="SettlementData"
              />
              <!-- 审核结算  -->
              <task-account
                ref="taskAccount"
                v-else-if="rightActiveTab == 'balance-tab'"
                :share-data="propsForSubComponents"
                @back="openDialog('back')"
                @proposeApprove="proposeApprove"
              />
              <!-- 客户评价  -->
              <task-feedback
                ref="taskFeedback"
                v-else-if="rightActiveTab == 'feedback-tab'"
                :share-data="propsForSubComponents"
                @proposeApprove="proposeApprove"
              />
              <!-- 服务商结算  -->
              <settlementTab
                ref="taskSettlementTab"
                v-else-if="rightActiveTab == 'settlement-tab'"
                :share-data="propsForSubComponents"
                :providerSettleV2="providerSettleV2"
                :provideSettleConfig="provideSettleConfig"
                @proposeApprove="proposeApprove"
                @close="CloseSettlement"
                @open="OpenSettlement"
                @saveData="saveDataSettlement"
                :SettlementData="SettlementData"
              />
              <!-- 物料清单  -->
                <task-material-list :task="task" v-else-if="rightActiveTab == 'material-tab'" />
              <!-- 故障清单  -->
              <fault-table 
                v-show="rightActiveTab == 'fault-tab'"
                ref="faultTabRef"
                class="fault-list"
                :task="task" 
                :addFaultAuth="addFaultAuth"
                :deleteFaultBtn="deleteFaultBtn"
                :editFaultBtn="editFaultBtn"
                isView
              />
              <!-- 附加组件  -->
                <task-detail-card 
                  ref="taskDetailCard"
                  v-if="taskCards.length > 0"
                  :right-active-tab="rightActiveTab" 
                  :task-cards="taskCards"
                  :share-data="propsForSubComponents" 
                  :form-cell-count="formCellCount"
                  :customStateNameEnable="!!customStateName"
                  @updateInfoRecord="updateInfoRecord" 
                  @dataUpdate="data => $set(task, 'cardInfo', data)"
                  @tabBarChangeItemNext="tabBarChangeItemNext"
                />
              </div>

            <div class="collapse-right" v-show="collapseDirection == 'right'">
              {{rightActiveTabItem[tabLabelKey]}}
            </div>
          </template>
        <!-- end 附加组件 -->
        </base-collapse>
        <!-- end 工单详情折叠面板 -->

        <!-- start 回退工单弹窗 -->
        <base-window :title="$t('task.backTask')" :show.sync="backDialog.visible" width="700px" class="task-back-dialog">
          <div class="base-modal-content">
            <p v-if="task.state == 'finished'">{{$t('task.tip.backTaskDialogTip1')}}</p>
            <p v-else-if="task.state == 'costed'">{{$t('task.tip.backTaskDialogTip2')}}</p>
            <div class="task-detail-view-panel">
              <div class="task-flex task-ai">
                <span v-if="isReasonRequired" class="task-cef task-font16 task-detail-view-panel-icon">*</span><span>{{$t('task.backReason')}}：</span>
                <el-select v-model="checkBack" :placeholder="`${isReasonRequiredPlaceholder} ${$t('task.detail.pleaseChooseBackReason')}`" class="task-w70">
                  <el-option
                    v-for="item in backList"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <span class="task-font12 task-c13 task-ml12 task-pointer" v-if="systemAdmin" @click="jump()">{{$t('task.goSetReason')}}</span>
              </div>
              <!--  -->
              <div class="task-flex task-mt12">
                <div class="task-font14">{{$t('task.detailReason')}}：</div>
                <!-- <textarea class="base-modal-textarea" v-model="backDialog.reason" placeholder="[选填] 请输入回退说明[最多500字]" rows="3" maxlength="500" /> -->
                <biz-at-textarea
                  class="biz-at-textarea"
                  style="flex: 1"
                  ref="atTextarea"
                  search-url="/message/user/lists"
                  name-key="displayName"
                  v-model="backDialog.reason"
                  :at-users.sync="atUsers"
                  direction="bottom"
                >
                  <template slot="item" slot-scope="item">
                    <img :src="head(item.user.head)" />
                    <span>{{item.user.displayName}}</span>
                  </template>
                  <textarea
                    ref="editor"
                    class="base-at-textarea textarea-disable-resize"
                    @input="inputBackContent"
                    :placeholder="$t('task.detail.backPlaceholder')"
                    maxlength="500"
                    :rows="3"
                  ></textarea>
                </biz-at-textarea>
              </div>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="backDialog.visible = false">{{$t('common.base.cancel')}}</el-button>
            <el-button type="primary" @click="back" :disabled="pending">{{$t('common.base.makeSure')}}</el-button>
          </div>
        </base-window>
      </div>
      <!-- end 回退工单弹窗 -->

      <!-- start 暂停工单弹窗 -->
      <base-window :title="$t('task.pauseTask')" :show.sync="pauseDialog.visible" width="700px">
        <div class="base-modal-content">
          <div class="task-detail-view-panel">
            <div class="task-flex task-ai">
              <span v-if="isReasonRequired" class="task-cef task-font16 task-detail-view-panel-icon">*</span><span>{{$t('task.pauseReason')}}：</span>
              <el-select v-model="checkBack" clearable :placeholder="`${isReasonRequiredPlaceholder} ${$t('task.detail.pleaseChoosePauseReason')}`" class="task-w70">
                <el-option
                  v-for="item in backList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <span class="task-font12 task-c13 task-ml12 task-pointer" v-if="systemAdmin" @click="jump()">{{$t('task.goSetReason')}}</span>
            </div>
            <!--  -->
            <div class="task-flex task-mt12">
              <div class="task-font14">{{$t('task.detailReason')}}：</div>
              <!-- <textarea class="base-modal-textarea" v-model="pauseDialog.reason" placeholder="[选填] 请输入暂停原因[最多500字]" rows="3" maxlength="500" /> -->
              <biz-at-textarea
                class="biz-at-textarea"
                style="flex: 1"
                ref="atTextarea"
                search-url="/message/user/lists"
                name-key="displayName"
                v-model="pauseDialog.reason"
                :at-users.sync="atUsers"
                direction="bottom"
              >
                <template slot="item" slot-scope="item">
                  <img :src="head(item.user.head)" />
                  <span>{{item.user.displayName}}</span>
                </template>
                <textarea ref="editor" class="base-at-textarea" @input="inputPauseContent" :placeholder="$t('task.detail.pausePlaceholder')" maxlength="500" :rows="3"></textarea>
              </biz-at-textarea>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="pauseDialog.visible = false">{{$t('common.base.cancel')}}</el-button>
          <el-button type="primary" @click="pause" :disabled="pending">{{$t('common.base.makeSure')}}</el-button>
        </div>
      </base-window>
      <!-- end 暂停工单弹窗 -->

      <!-- start 拒绝工单弹窗 -->
      <base-window :title="$t('task.refuseTask')" :show.sync="refuseDialog.visible" width="700px">
        <div class="base-modal-content">
          <div class="task-detail-view-panel">
            <div class="task-flex task-ai">
              <span v-if="isReasonRequired" class="task-cef task-font16 task-detail-view-panel-icon">*</span><span>{{$t('task.refuseReason')}}：</span>
              <el-select v-model="checkBack" clearable :placeholder="`${isReasonRequiredPlaceholder} ${$t('task.detail.pleaseChooseRefuseReason')}`" class="task-w70">
                <el-option
                  v-for="item in backList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <span class="task-font12 task-c13 task-ml12 task-pointer" v-if="systemAdmin" @click="jump()">{{$t('task.goSetReason')}}</span>
            </div>
            <!--  -->
            <div class="task-flex task-mt12">
              <div class="task-font14">{{$t('task.detailReason')}}：</div>
              <textarea class="base-modal-textarea" v-model="refuseDialog.reason" :placeholder="$t('task.detail.refusePlaceholder')" rows="3" maxlength="500" />
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="refuseDialog.visible = false">{{$t('common.base.cancel')}}</el-button>
          <el-button type="primary" @click="refuse" :disabled="pending">{{$t('common.base.makeSure')}}</el-button>
        </div>
      </base-window>
      <!-- end 拒绝工单弹窗 -->

      <!-- start 取消工单弹窗 -->
      <cancel-task-dialog ref="cancelTaskDialog" :isProjectTask="task.projectTaskId" :task-id="task.id" :card-info="cardInfo" @proposeApprove="cancelModel" :back-list="backList" :system-admin="systemAdmin" :required="isReasonRequired" :required-placeholder="isReasonRequiredPlaceholder"/>
      <!-- end 取消工单弹窗 -->

      <!-- start 计划时间弹窗 -->
      <plantime-dialog ref="planTimeDialog" :task="task" :field="planTimeField" :modifiable="taskConfig.taskPlanTime" />
      <!-- end 计划时间弹窗 -->

      <!-- start 日历下接单接受时计划时间弹窗 -->
      <calendar-plantime-dialog 
        ref="calendarPlanTimeDialog" 
        :task="task" 
        :start-field="planStartTimeField" 
        :end-field="planEndTimeField" 
        :modifiable="taskConfig.taskPlanTime" 
        :state-button-data="stateButtonData"
        :is-refuse="task.state != 'taskPool'"
        @refuse="openDialog('refuse')"
      />
      <!-- end 日历下接单接受时计划时间弹窗 -->

      <!-- start 计划开始和结束时间弹窗 -->
      <calendar-plantime-dialog
        ref="calendarPlanTimeDialogComponent" 
        :task="task" 
        :start-field="planStartTimeField" 
        :end-field="planEndTimeField"
        :modifiable="taskConfig.taskPlanTime" 
        :is-accept-calendar-time="false"
        :is-refuse="task.state != 'taskPool'"
        @refuse="openDialog('refuse')"
      />
      <!-- end 计划开始和结束时间弹窗 -->
    
      <!-- start 审批弹窗 -->
      <task-approve-dialog ref="approveTaskDialog" :customNodeTitle="customNodeTitle" :customNodeId="customNodeId" :approve-id="unFinishedAppr.id" :task-id="task.id" :approve-user-remark="taskConfigData.approveUserRemark" />
      <!-- end 审批弹窗 -->

      <!-- 新增审批签名 -->
      <task-approve-signature 
        ref="approveSignature"
        v-bind="$attrs"
        :approveId="unFinishedAppr.id"
        :approveUserRemark="taskConfigData.approveUserRemark"
        :taskId="task.id" :signaturesApprove="approve" :currLevel="currLevel">
      </task-approve-signature>

      <!-- 高级审批 -->
    <task-advanced-approve
      ref="taskAdvancedApprove"
      :vip-btn-setting="vipBtnSetting"
      :approve-button-text="approveButtonText"
      :approve-attachments="approveAttachments"
      :signatures-approve="approve"
      :approve-info-params="approveInfoParams"
      :head="head"
      :approve="approve"
      @upload="upload"
      @remove="remove"
      @submit="submit"
    >
    </task-advanced-approve>
    <!-- 高级审批 -->



   

      <!-- start 工单发起审批弹窗 -->
      <propose-approve-dialog ref="proposeApprove" :remark-required="taskConfig.approveRemark" :task-id="task.id" :task-no="task.taskNo" :customNodeId="customNodeId" @success="onApproveSuccessHandler" />
      <!-- end 工单发起审批弹窗 -->

      <!-- start 完成回执弹窗 -->
      <task-receipt-edit-view 
        ref="taskReceiptEdit"
        :init-data="initData" 
        :receipt-fields="receiptFields" 
        :task-fields="fields" 
        :share-data="propsForSubComponents" 
        @proposeApprove="proposeApprove" 
        :part-field="partField" 
        :quality-info="task.qualityInfo"
        :spare-part-card-list="sparePartCardList"
        :intelligentConfig="intelligentConfig"
      />
      <!-- end 完成回执弹窗 -->

      <!-- start 查看全部时间点 -->
      <task-time-dialog ref="timeAxis" />
      <!-- end 查看全部时间点 -->
    
      <!-- start 分配弹窗 -->
      <task-allot-modal 
        v-if="allowRedeployTask || allowAllotTask" 
        ref="TaskAllotModal"
        :fields="fields"
        :task="task" 
        :login-user="initData.loginUser"
        :is-re-allot="allowRedeployTask"
        :back-list="backList"
        :system-admin="systemAdmin"
        :not-null="notNull"
        :plan-start-time="planStartTime"
        :plan-end-time="planEndTime"
        @updateTask="outsideUpdateTask"
        @updateRecords="outsideUpdateRecords"
      />
      <!-- end 分配弹窗 -->

      <!-- start 生成服务报告弹窗 -->
      <service-report-dialog ref="serviceReportRef" :task="task" :taskStatusId="processCurrentState" :sr-print-authority="srPrintAuthority" @success="onApproveSuccessHandler" />
      <!-- end 生成服务报告弹窗 -->


      <wiki-recommend
        v-if="wikiTaskFunction"
        :from-detail="true"
        @open="
          (value, cb) =>
            taskConvertWiki().then(data => {
              cb(data);
            })
        "
        :keywords="wikiKeywords">
      </wiki-recommend>

      <biz-layout-modal
        ref="bizLayoutModal"
        :biz-layout-type="baseLayout"
        :columns="formCellCount"
        @changeLayout="changeTaskDetailLayout">
      </biz-layout-modal>

      <!-- 一键了拉群引导 -->
      <div id="pull-group-guide"></div>
      <SettlementDialog
        @save="SettlementSave"
        @close="CloseSettlement"
        :SettlementData="SettlementData"
        v-if="isSettlementDialog"
        :isShow="isSettlementDialog"
        :share-data="propsForSubComponents"
      />
      <!-- 自定义节点操作弹框   -->
      <InitiateDialog ref="InitiateDialogRef" :taskId="this.task.id" :currentNodeId="currentNodeId" @start="start" @proposeApprove="proposeApprove"/>
    </div>
  </div>
</template>

<script>
import TaskDetailView from './TaskDetailView';
export default TaskDetailView;
</script>

<style lang="scss">
@import './TaskDetailView.scss';
</style>

<style lang="scss">
.no-auth{
  padding-top: 10%;
  text-align: center;
  img {
    width: 160px;
    height: 160px;
  }
  .desc {
    margin-top: 8px;
    color: $text-color-regular;
  }
}
.task-detail-container {
    .v-step[data-v-7c9c03f0] {
        background: #fff !important;
        color: #333 !important;
        -webkit-filter: drop-shadow(0px 9px 28px 8px rgba(0, 0, 0, 0.05)) !important;
        filter: drop-shadow(0px 9px 28px 8px rgba(0, 0, 0, 0.05)) !important;
        padding: 0 !important;
        min-width: 240px !important;
        max-width: 350px !important;
    }

    .v-step .v-step__arrow[data-v-7c9c03f0] {
        border-color: #fff !important;
        border-left-color: transparent !important;
        border-right-color: transparent !important;
    }
    .v-tour-content-box {
    position: relative;
    overflow: hidden;
    padding: 0 20px;
    border-radius: 4px;
    .v-tour-left-tips {
      width: 80px;
      height: 32px;
      background: $color-primary;
      color: #fff;
      position: absolute;
      left: -40px;
      top: 0px;
      line-height: 40px;
      font-size: 12px;
      transform-origin: center top;
      transform: rotateZ(-45deg);
      text-align: center;
    }
    .v-tour-content {
      .v-tour-content-head {
        padding-top: 32px;
        padding-bottom: 10px;
        .iconfont {
          font-size: 10px;
          margin-bottom: 2px;
          color: #999;
          cursor: pointer;
        }
      }
      .v-tour-content-con {
        text-align: start;
        padding-bottom: 12px;
      }
    }
  }

  .v-tour-bottom {
    height: 52px;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btns {
      width: 60px;
      height: 28px;
      background: $color-primary;
      color: #fff;
      text-align: center;
      line-height: 28px;
      border-radius: 4px;
    }
    .text {
      @include fontColor();
    }
    :nth-child(n) {
      cursor: pointer;
    }
    :not(:last-child) {
      margin-right: 12px;
    }
  }

  /* 向上的箭头 */

  .normal-arrow-top {
    font-size: 0;
    line-height: 0;
    border-width: 0.5rem;
    border-color: #fff;
    width: 0;
    border-top-width: 0;
    border-style: dashed;
    border-bottom-style: solid;
    border-left-color: transparent;
    border-right-color: transparent;
    position: absolute;
    top: -0.5rem;
  }
    .guide-model-box {
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 996;
    }

    .guide-point {
        z-index: 997;
        position: sticky;
    }

    .bg-w {
        background: #fff;
    }

    .task-detail-step-2-box {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 997;

        .task-detail-step-2 {
            width: 104px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
            left: 0;
            position: absolute;
            background: transparent;
        }
    }
}
.form-view-row-content-address{
  cursor: pointer;
}
.form-view-row-content-address:hover{
  color: $color-primary-light-6;
 }
 .Add{
  color: #13c2c1;
  cursor: pointer;
 }
 // 选人控件和引导层级调整
#pull-group-guide .tour-content-out-box{
  z-index: 10000;
}

.base-detail-tile-layout {
  min-height: 100%;
  overflow: unset;
  background-color: white;
  &-content {
    padding: 16px;
  }
}
</style>
